import * as echarts from 'echarts/core';
import { TooltipComponent, LegendComponent } from 'echarts/components';
import { GraphChart } from 'echarts/charts';
import { LabelLayout } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
import { useEffect, useRef } from 'react';
import graph from './graph'

echarts.use([
  TooltipComponent,
  LegendComponent,
  GraphChart,
  CanvasRenderer,
  LabelLayout
]);

function App() {
  const ref = useRef(null)
  const nodeRef = useRef(null);

  useEffect(() => {
    const option = {
      tooltip: {},
      legend: [
        {
          data: graph.categories.map(function (a) {
            return a.name;
          }),
          selectedMode: false,
          selected: {
            'A': true,
            'B': true,
            'C': true
          },
          emphasis:{
            selectorLabel:{
              show:true,

            }
          }
        }
      ],
      series: [
        {
          id: "series1",
          name: 'Les Miserables',
          type: 'graph',
          layout: 'none',
          data: graph.nodes,
          links: graph.links,
          categories: graph.categories,
          edgeSymbol: ['circle', 'arrow'],
          edgeSymbolSize: [4, 10],
          roam: true,
          focusNodeAdjacencyOn: 'click',
          legendHoverLink: false,
          label: {
            show: true,
            position: 'right',
            formatter: '{b}'
          },
          labelLayout: {
            hideOverlap: true
          },
          scaleLimit: {
            min: 0.4,
            max: 2
          },
          lineStyle: {
            color: 'source',
            curveness: 0.3
          },
          emphasis: {
            color: "inherit",
            focus: 'adjacency',
          },
          selectedMode: 'single',//单选
        }
      ]
    };
    const myChart = echarts.init(ref.current);
    myChart.on('mouseover', function (e) {
      if (nodeRef.current === null) {
        myChart.dispatchAction({
          type: 'downplay',
          dataIndex: e.dataIndex,
        })
      } else {
        myChart.dispatchAction({
          type: 'highlight',
          dataIndex: nodeRef.current,
        })
      }
    })
    myChart.on('mouseout', { dataType: 'node' }, function (e) {
      if (nodeRef.current !== null) {
        myChart.dispatchAction({
          type: 'highlight',
          dataIndex: nodeRef.current,
        })
      }
    });
    myChart.on('mouseout', { dataType: 'edge' }, function (e) {
      if (nodeRef.current !== null) {
        myChart.dispatchAction({
          type: 'highlight',
          dataIndex: nodeRef.current,
        })
      }
    });
    myChart.on('selectchanged', { dataType: 'node' }, function (e) {
      //点击选择
      const { fromAction, selected } = e;
      if (fromAction === "select") {
        const dataIndex = String(selected[0].dataIndex[0]);

        const s = new Set();
        const linkData = graph.links.filter(item => item.source === dataIndex || item.target === dataIndex)
        linkData.forEach(item => {
          s.add(item.source)
          s.add(item.target)
        })

        nodeRef.current = [...s];
        // console.log(dataIndex,nodeRef.current)
        myChart.dispatchAction({
          type: 'highlight',
          dataIndex: nodeRef.current,
        })
      } else if (nodeRef.current) {
        myChart.dispatchAction({
          type: 'downplay',
          dataIndex: nodeRef.current,
        })
        nodeRef.current = null;
      }
    });
    myChart.on('legendselected', function (e) {
      console.log(e)
    });
    myChart.on('legendunselected', function (e) {
      console.log(e)
    });
    myChart.on('legendselectchanged', function (e) {
      console.log(e)
    });
    myChart.on('click', function (e) {
      console.log(e)
    });
    myChart.showLoading();
    setTimeout(() => {
      myChart.hideLoading();
      myChart.setOption(option);
    }, 0)

  }, [])
  return (
    <div className="demo-container" ref={ref}/>
  );
}

export default App;
